<template>
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left" @click="goBack"></i>
      <p>余额提现</p>
    </header>
    <div class="account">转入账户</div>
    <h1>提现金额</h1>
    <div class="money-out">
      <p>￥</p>
      <input type="text" v-model="amount" placeholder="请输入金额" ref="cin" @keydown="normalizee" @click="clear">
    </div>
    <div class="confirm1" v-show="amount==''" @click="withdraw">
      <p>确认提现</p>
    </div>
    <div class="confirm2" v-show="amount!=''" @click="withdraw">
      <p>确认提现</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Withdraw",
  data() {
    return {
      user: {},
      amount: ''
    }
  },
  created() {
    this.user = this.$getSessionStorage('user');
  },
  methods: {
    //回退事件
    goBack() {
      this.$router.push({path: '/recharge'});
    },
    clear() {
      this.$refs.cin.value = '';
    },
    normalizee() {
      // 通过正则过滤小数点后两位
      this.$refs.cin.value = (this.$refs.cin.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null;

      // e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null
    },
    withdraw() {
      if(this.amount==''){
        alert("请输入金额。");
        return;
      }
      //TODO
      this.$axios.post('withdrawWallet', this.$qs.stringify({
        userID: this.user.userId,
        AmountofMoney: this.amount
      })).then(response => {
        if (response.data != 1) {
          alert("提现失败,请检查钱包余额.")
        }
        else{
          this.$router.push({path:'/recharge'});
        }
      }).catch(error => {
        console.error(error);
      });
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
}

.wrapper header {
  height: 10vw;

  display: flex;
  align-items: center;

  border-bottom: solid 1px #AEAEAE;
}

.wrapper header .fa-angle-left {
  font-size: 5vw;
  font-weight: 500;

  margin-left: 2vw;
}

.wrapper header p {
  font-size: 4vw;
  font-weight: 600;

  margin-left: 4vw;
}

.wrapper .account {
  margin-top: 3vw;
  margin-left: 3vw;

  font-size: 5vw;
  font-weight: 500;
}

.wrapper h1 {
  font-size: 5vw;
  font-weight: 500;

  margin-top: 3vw;
  margin-left: 3vw;
}

.wrapper .money-out {
  display: flex;
  align-items: center;

  margin-top: 5vw;
  margin-left: 3vw;
}

.wrapper .money-out p {
  font-size: 6vw;
  font-weight: 500;
}

.wrapper .money-out input {
  border: none;
  outline: none;

  font-size: 5vw;
}

.wrapper .confirm1 {
  height: 10vw;

  display: flex;
  align-items: center;
  justify-content: center;


  margin: 12vw 3vw 0 3vw;
  border-radius: 20px;
  background-color: #c5c3c3;
}

.wrapper .confirm1 p {
  color: #ffffff;
  font-size: 4vw;
  font-weight: 600;

}

.wrapper .confirm2 {
  height: 10vw;

  display: flex;
  align-items: center;
  justify-content: center;


  margin: 12vw 3vw 0 3vw;
  border-radius: 20px;
  background-color: #359cff;
}

.wrapper .confirm2 p {
  color: #ffffff;
  font-size: 4vw;
  font-weight: 600;

}

</style>